<template>
  <div class="plugin-order-info-pay">
    <div class="list" v-for="(item, index) in payStore.getPay()">
      <div class="icon">
        <t-popconfirm 
          theme="warning" 
          placement="left"
          :content="$t('message.confirm.delete')" 
          @confirm="onDel(index)"
        >
          <t-button theme="default" shape="square" size="small">
            <template #icon>
              <t-icon name="close" size="20px" />
            </template>
          </t-button>
        </t-popconfirm>
      </div>
      <div class="money">{{ app.money.format(item.money) }}</div>
      <div class="name">{{ item.pay_name }}</div>
      <div class="time">{{ item.date ? item.date : app.time.load(item.created_at).date() }}</div>
    </div>
    <t-button block theme="primary" variant="outline" @click="open()">{{ plugin.t('pay.btn') }}</t-button>
    <t-dialog
      v-model:visible="show"
      :width="400"
      :header="plugin.t('pay.btn')"
      :onConfirm="() => form.submit()"
      destroyOnClose
      :closeOnOverlayClick="false"
    >
      <template #body>
        <t-form ref="form" :data="formData" :rules="formRule" label-align="top" @submit="onSubmit">
          <t-form-item :label="plugin.t('pay.pay_id')" name="pay_id">
            <t-select v-model="formData.pay_id" @change="value => formData.pay_name = configPayStore.name(value)">
              <t-option v-for="item in payType" :value="item.id" :label="item.name" />
            </t-select>
          </t-form-item>
          <t-form-item :label="plugin.t('pay.money')" name="money">
            <t-input-number v-model="formData.money" theme="column" style="width: 100%" />
          </t-form-item>
          <t-form-item :label="plugin.t('pay.date')">
            <t-date-picker v-model="formData.date" :format="app.time.format()" style="width: 100%" />
          </t-form-item>
        </t-form>
      </template>
      <template #footer>
        <t-button theme="primary" :loading="loading" @click="form.submit()">
          {{ plugin.t('pay.btn') }}
        </t-button>
      </template>
    </t-dialog>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../../index'
  import payStore from './store'
  import configPayStore from '@/plugin/config/store/pay'
  
  const plugin = index.plugin
  const show = ref(false)
  const loading = ref(false)
  const payType = ref([])
  const form = ref(null)
  const formData = ref({})
  const formRule = {
    pay_id: [{ required: true, message: ' ', type: 'error' }],
    money: [{ required: true, message: ' ', type: 'error' }]
  }

  const open = () => {
    payType.value = configPayStore.all(payStore.getTotal())
    formData.value = {
      pay_id: payType.value[0].id, 
      pay_name: payType.value[0].name,
      money: payStore.getRemain(),
      date: ''
    }
    show.value = true
  }

  const onSubmit = ({ validateResult }) => {
    if (validateResult === true) {
      loading.value = true
      payStore.add(formData.value).then(res => {
        show.value = false
        app.message('success', 'message.' + res.message)
      }).catch(err => {
        app.message('error', 'message.error.' + err.message)
      }).finally(() => {
        loading.value = false
      })
    }
  }

  const onDel = i => {
    payStore.del(i).then(res => {
      app.message('success', 'message.' + res.message)
    }).catch(err => {
      app.message('error', 'message.error.' + err.message)
    })
  }

  if(!configPayStore.all().length) {
    configPayStore.get()
  }
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-order-info-pay{
    .list{
      background: $color-bg;
      border-radius: 5px;
      padding: 15px;
      margin-bottom: 15px;
      color: $color-title;

      .name{
        font-size: 14px;
        font-weight: bold;
        line-height: 20px; 
      }

      .time{
        font-size: 12px;
        line-height: 20px; 
      }

      .money{
        float: right;
        font-weight: bold;
        font-size: 14px; 
        line-height: 40px; 
      }

      .icon{
        color: $color-error;
        float: right;
        line-height: 40px;
        padding-left: 15px;
      }
    }
  }
</style>